<template>
    <el-dialog title="请选择" :visible.sync="transferDialog" @close="confirm" append-to-body height="450px" width="65%" custom-class="transferForm">
      <div>
        <ul class="teamList">
          <li class="current">单位</li>
        </ul>
        <div class="transferForm-box">
          <div class="transferLeft transferBox" v-if="teamTitleCurrent === 1 || teamTitleCurrent === 2 || teamTitleCurrent === 7">
            <div class="transferBox-title">请选择</div>
            <div class="transferBox-con">
              <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
          </div>
          <div class="transferArrow">
            <i class="arrowIcon el-icon-right" @click="moveClick('right')"></i>
            <i class="arrowIcon el-icon-back" @click="moveClick('left')"></i>
          </div>
          <div class="transferRight transferBox">
            <div class="transferBox-title">{{!multiple ? '仅可选一项' : '已选择'}}</div>
            <div class="transferBox-con">
              <el-row v-for="item in teamActiveList" :key="item.id" :class="{current: teamActiveCurrent === item.id}"><div @click="teamActiveListClick(item)"><el-col :span="24">{{ item.label }}</el-col></div></el-row>
            </div>
          </div>
          <div class="transferArrow">
            <i class="arrowIcon el-icon-top" @click="moveClick('top')"></i>
            <i class="arrowIcon el-icon-bottom" @click="moveClick('bottom')"></i>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
</template>

<script>
	export default {
    data() {
      return {
        teamTitleList: ['最近', '部门', '多维组织', '组', '岗位', '职务级别', '编外人员', '外部机构'],
        teamTitleCurrent: 1,
        radio: '1',
        filterText: '',
        filteSingleText: '',
        checked: false,
        data: [{
          label: '远望设计研究院有限公司',
          parentId: 0,
          children: [{
            label: '总经办',
            id: 11,
            parentId: 1,
          }, {
            label: '远望勘察设计有限责任公司',
            id: 21,
            parentId: 1,
            children: [{
              label: '综合办公室',
              id: 211,
              parentId: 21
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        teamCurrent: null,
        teamActiveList: [],
        teamActiveCurrent: null
      }
    },
    props: {
      multiple: {
        type: Boolean,
        default: false
      },
      transferDialog: {
        type: Boolean,
        default: false
      },
      currentval: {
        type: Array,
        default: []
      },
      isUser: {
        type: Boolean,
        default: true
      },
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      filteSingleText(val) {
        this.teamList = this.teamList.filter(item => item.label.indexOf(val) > -1);
      },
      currentval(val) {
        this.teamActiveList = val
        console.log(val, 'val')
      },
    },
    created() {
    },
    methods: {
      handleNodeClick(data) {
        this.teamList = [data]
      },
      teamListClick(row) {
        this.teamCurrent = row.id
      },
      teamActiveListClick(row) {
        this.teamActiveCurrent = row.id
      },
      moveClick(name) {
        if (name === 'right') {
          if (this.multiple) {
            let num = 0
            if (this.teamActiveList.length > 0) {
              this.teamActiveList.forEach(item => {
                if (item.id === this.teamCurrent) num++
              });
            }
            if (num === 0) {
              this.teamActiveList.push(this.teamList.filter(item => item.id === this.teamCurrent)[0])
            }
          } else {
            this.teamActiveList = this.teamList
          }
        }
        if (name === 'left') {
          this.teamActiveList.forEach((item, i) => {
            if (item.id === this.teamActiveCurrent) {
              this.teamActiveList.splice(i, 1)
            }
          })
        }
        if (name === 'top') {
          let index = 0
          this.teamActiveList.forEach((item, i) => {
            if (item.id === this.teamActiveCurrent) index = i
          })
          if (index > 0) {
            //在上一项插入该项
            this.teamActiveList.splice(index - 1, 0, (this.teamActiveList[index]))
            //删除后一项
            this.teamActiveList.splice(index + 1, 1)
          }
        }
        if (name === 'bottom') {
          let index = 0
          this.teamActiveList.forEach((item, i) => {
            if (item.id === this.teamActiveCurrent) index = i
          })
          if (index > 0 && (index + 1 !== this.teamActiveList.length)) {
            // 在下一项插入该项
            this.teamActiveList.splice(index + 2, 0, (this.teamActiveList[index]))
            // 删除前一项
            this.teamActiveList.splice(index, 1)
          }
        }
      },
      confirm() {
        this.$emit('ransferData', {
          transferDialog: false,
          list: this.teamActiveList
        })
      }
    }
	}
</script>

<style lang="scss" scoped>
.teamList {
  border-bottom: 1px solid #409EFF;
  display: flex;
  margin-bottom: 15px;
  li {
    list-style: none;
    min-width: 60px;
    padding: 0 10px 5px;
    font-size: 13px;
    text-align: center;
    &.current {
      border-bottom: 2px solid #409EFF;
    }
  }
}
/deep/ .transferForm {
  background: #f5f5f5;
  border-top: 5px solid #409EFF;
  .el-dialog__header {
    border-bottom: 1px solid #dedede;
  }
  .el-dialog__title {
    font-size: 15px;
    color: #999999;
  }
  .el-dialog__body {
    padding-top: 10px;
  }
  .transferForm-box {
    display: flex;
    height: 400px;
    .transferLeft {
      width: calc(55% - 80px);
    }
    .transferRight {
      width: calc(45% - 80px);
      height: 100%;
    }
    .transferArrow {
      width: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .arrowIcon {
        width: 30px;
        height: 30px;
        margin: 10px 0;
        background: #b4ccd5;
        border-radius: 50%;
        color: #ffffff;
        font-size: 18px;
        font-weight: bolder;
        display: flex;
        justify-content: center;
        align-items: center;
        &:hover {
          background-color: #409EFF;
        }
      }
    }
    .transferBox {
      border: 1px solid #cccccc;
      background-color: #ffffff;
      .transferBox-title {
        display: flex;
        align-items: center;
        height: 40px;
        padding: 0 10px;
        background-color: #e4e4e4;
        .selectFilter {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .text {
            width: 80%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
      .transferBox-con {
        width: 100%;
        height: calc(50% - 40px);
        padding: 5px 10px;
        overflow-y: scroll;
        font-size: 13px;
        .current {
          background-color: rgba($color: #409EFF, $alpha: 0.4);
        }
        .el-col {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          margin: 0;
        }
      }
    }
  }
  .el-dialog__footer {
    background-color: #333333;
  }
}
.dialog-footer {
}
</style>
